<template>
  <div class="contentbox">
    <HeadTop title="动态详情" />
    <div v-for="(item,index) in info2" :key="index">
      <div class="username">
        <div class="touxiang">
          <img :src="item.touxiang" alt />
        </div>
        <div class="autor">
          <p>{{item.author}}</p>
          <span>{{item.city}}</span>
        </div>
        <div class="time">{{item.time}}</div>
      </div>
      <div class="content">
        <div class="content-img">
          <img :src="item.img" alt />
        </div>
        <div class="content-text">
          <span>{{item.text}}</span>
        </div>
      </div>
    </div>
    <div class="zan">
      <div class="aixin">
        <span class="icon iconfont xin" v-if="flagsItuidao" @click="clickIcon">&#xe85c;</span>
        <span class="icon iconfont xin" v-else @click="clickIcon2">&#xe602;</span>
      </div>
      <ul class="user">
        <li v-for="(item,index) in info" :key="index">
          <img :src="item.img" alt />
        </li>
        <li>...</li>
      </ul>
      <div class="zanNum">313个赞</div>
    </div>
    <div class="talk">
      <div class="title">
        <div>全部评论(12)</div>
      </div>
      <ul v-for="(item,index) in info3" :key="index">
        <li>
          <div class="touimg">
            <img :src="item.img" alt />
          </div>
          <div class="talk-content">
            <p>{{item.name}}</p>
            <p>{{item.talkTime}}</p>
            <span>{{item.content}}</span>
            <div class="like">
              <span class="icon iconfont xin" v-if="flag" @click="clickLike">&#xe85c;13</span>
              <span class="icon iconfont xin1" v-else @click="clickLike2">&#xe602;13</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="speak">
      <div class="aou"></div>
      <div class="InputBox" value=''>
        <contenteditable
          tag="div"
          :contenteditable="isEditable"
          v-model="message"
          :noNL="true"
          @returned="enterPressed"
          class="p"
        />
      </div>
      <span @click="send">发送</span>

    </div>
    <el-button :plain="true">成功</el-button>
  </div>
</template>

<script>
import HeadTop from "../../../components/Nav/HeadTop";
export default {
  data() {
    return {
      Person: [],
      id: "",
      flagsItuidao: false,
      flag: false,
      info: [],
      info2: [],
      info3: [],
      isEditable: true,
      message: ""
    };
  },
  mounted() {
    
    this.id = this.$route.params.id;
   // console.log(this.id);
    this.api.GetItuidao(this.id).then(data => {
      this.info2 = data.data.arr;
      this.info3 = data.data.arr[0].talk;
     // console.log(data.data.arr[0].talk);
    });

    this.api.GetZan().then(data => {
      this.info = data.data.Zan;
      //console.log(this.info);
    });
  },
  props: ["title"],
  components: {
    HeadTop
  },
  methods: {
     //发送
    send(id){
       this.$message({
          message: '评论成功',
          type: 'success',
          duration:2000
        }),
        this.$router.back()
     
    },
    clickIcon() {
      this.flagsItuidao = !this.flagsItuidao;
      localStorage.setItem("flagsItuidao", this.flagsItuidao);
    },
    clickIcon2() {
      this.flagsItuidao = !this.flagsItuidao;
      localStorage.setItem("flagsItuidao", this.flagsItuidao);
    },
    clickLike() {
      this.flag = !this.flag;
      localStorage.setItem("flag", this.flag);
    },
    clickLike2() {
      this.flag = !this.flag;
      localStorage.setItem("flag", this.flag);
    },
     enterPressed() {
      alert("Enter Pressed");
    }
  }
};
</script>

<style lang="less" scoped>

.contentbox {
  width: 100%;
  background: #eee;
  .username {
    width: 100%;
    height: 1.5rem;
    margin: 0 auto;
    background: #fff;
    .touxiang {
      margin-top: 0.2rem;
      margin-left: 0.1rem;
      width: 1rem;
      height: 1rem;
      background: red;
      border-radius: 50px;
      float: left;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .autor {
      margin-left: 0.3rem;
      margin-top: 0.2rem;
      p {
        font-size: 0.35rem;
      }
      span {
        font-size: 0.3rem;
        color: #999;
        line-height: 0.3rem;
      }

      float: left;
    }
    .time {
      margin-top: 0.8rem;
      margin-right: 0.3rem;
      float: right;
      font-size: 0.3rem;
      color: #999;
    }
  }
  .content {
    background: #fff;
    height: 6rem;
    .content-img {
      width: 95%;
      height: 70%;
      margin: 0 auto;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content-text {
      height: 30%;
      font-size: 0.3rem;
      line-height: 0.5rem;
    }
  }
  .zan {
    width: 100%;
    height: 1rem;
    margin-top: 0.5rem;
    background: #fff;
    .aixin {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50px;
      float: left;
      border: 1px solid red;
      position: relative;
      top: 0.2rem;
      left: 0.1rem;
      .xin {
        position: absolute;
        top: 0.04rem;
        left: 0.05rem;
        font-size: 0.4rem;
        color: red;
      }
    }
    .user {
      width: 5.3rem;
      height: 1rem;
      margin-left: 0.2rem;
      float: left;
      li {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 50px;
        text-align: center;
        background: #eee;
        color: #999;
        line-height: 0.3rem;
        margin-top: 0.2rem;
        margin-left: 0.2rem;
        float: left;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .zanNum {
      color: #999;
      font-size: 0.27rem;
      float: right;
      margin-right: 0.2rem;
      margin-top: 0.3rem;
    }
  }
  .talk {
    width: 100%;
    background: #fff;
    margin-top: 0.3rem;
    .title {
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      border-bottom: 1px solid #eee;
      div {
        width: 24%;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        margin-left: 0.2rem;
        font-size: 0.3rem;
        color: #999;
        border-bottom: 2px solid #999;
      }
    }
    ul {
      margin-top: 0.5rem;
      li {
        height: 2.5rem;
        border-bottom: 1px solid #eee;
      }
    }
    .touimg {
      width: 1rem;
      height: 1rem;
      border-radius: 50px;
      margin-top: 0.1rem;
      float: left;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .talk-content {
      width: 6rem;
      height: 1rem;
      float: left;
      margin-left: 0.3rem;
      font-size: 0.3rem;
      p {
        margin-bottom: 0rem;
      }
      .like {
        float: right;
        position: relative;
        top: -1.5rem;
        left: -0.2rem;
        .xin {
          font-size: 0.3rem;
          color: red;
        }
        .xin1 {
          font-size: 0.3rem;
          color: #888;
        }
      }
    }
  }
  .speak {
    position: fixed;
    width: 100%;
    height: 1rem;
    background: #eee;
    border: 1px solid #eee;
    font-size: 0.3rem;
    bottom: 0rem;
    .aou {
      width: 0.6rem;
      height: 0.6rem;
      background: pink;
      border-radius: 50%;
      margin: 0.2rem 0.1rem;
      float: left;
    }
    .InputBox {
      float: left;
      width: 75%;
      height: 60%;
      background: #fff;
      margin: 0.2rem auto;
    }
    span {
      position: absolute;
      // font-size: 0.3rem;
      top: 0.3rem;
      right: 0.3rem;
    }
  }
}
</style>